<template>
    <div>
        <h2>{{firstName}} {{lastName}}</h2>
        <h2>{{fullName}}</h2>
        <button @click="changeName">修改</button>
    </div>
</template>

<script>
    import { ref, computed } from 'vue';

    export default {
        setup() {
            const firstName = ref('kobe');
            const lastName = ref('Bryant');

            // 传入一个getter函数
            // computed返回值是一个ref对象
            // const fullName = computed(() => firstName.value + ' '+  lastName.value)
            
            // 传入一个对象,包含getter和setter
            const fullName = computed({
                get: () => firstName.value + ' ' + lastName.value,
                set(newValue) {
                    const names = newValue.split(' ');
                    firstName.value = names[0];
                    lastName.value = names[1];
                }
            });

            const changeName = () => {
                // firstName.value = 'leon'
                fullName.value = 'leon coder';
            }

            return {
                firstName,
                lastName,
                fullName,
                changeName
            }
        }
    }
</script>

<style scoped>

</style>